<template>
  <div>
    <Layout>
      <template #left-content>
        <div class="drag drag-panel"></div>
        <div class="top-search">
          <el-input :prefix-icon="Search" size="small"> </el-input>
        </div>
        <div class="contact-list">
          <template v-for="part in partList" :key="part.partName">
            <div class="part-title">{{ part.partName }}</div>
            <div class="part-list">
              <template v-for="item in part.children" :key="item.name">
                <div
                  :class="['part-item', item.path === route.path ? 'active' : '']"
                  @click="partJump(item)"
                >
                  <div :class="item.icon" :style="{ backgroundColor: item.iconBgColor }"></div>
                  <div class="text">{{ item.name }}</div>
                </div>
              </template>
            </div>
            <template v-if="part.contactData && part.contactData.length === 0 && part.emptyMsg">
              <div class="part-empty">{{ part.emptyMsg }}</div>
            </template>
            <template v-else>
              <div v-for="contact in part.contactData" :key="contact.contactId"></div>
            </template>
          </template>
        </div>
      </template>
      <template #right-content>
        <div class="drag drag-panel"></div>
        <router-view></router-view>
      </template>
    </Layout>
  </div>
  <WinOp :close-type="1"></WinOp>
</template>

<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const partList = [
  {
    partName: '新朋友',
    children: [
      {
        name: '搜好友',
        icon: 'iconfont icon-sousuo',
        iconBgColor: '#fa9d3ba6',
        path: '/contact/search'
      },
      {
        name: '新的朋友',
        icon: 'iconfont icon-zhifeiji',
        iconBgColor: '#52c41aa6',
        path: '/contact/contactNotice',
        showTtitle: true,
        countKey: 'contactApplyCount'
      }
    ]
  },
  {
    partName: '我的群聊',
    children: [
      {
        name: '新建群聊',
        icon: 'iconfont icon-qunliao',
        iconBgColor: '#1890ffa6',
        path: '/contact/createGroup'
      }
    ],
    contactId: 'groupId',
    contactName: 'groupName',
    showTitle: true,
    contactData: [],
    contactPath: '/contact/groupDetail'
  },
  {
    partName: '我加入的群聊',
    contactId: 'contactId',
    contactName: 'contactName',
    showTitle: true,
    contactData: [],
    contactPath: '/contact/groupDetail',
    emptyMsg: '暂未加入群聊'
  },
  {
    partName: '通讯录',
    children: [],
    contactId: 'contactId',
    contactName: 'contactName',
    contactData: [],
    contactPath: '/contact/userDetail',
    emptyMsg: '暂无好友'
  }
]
const rightTitle = ref()
function partJump(data) {
  rightTitle.value = data.showTitle ? data.name : null
  router.push(data.path)
}
</script>

<style scoped lang="scss">
.drag-panel {
  height: 16px;
}
.top-search {
  padding: 8px;
  :deep(.el-input__wrapper) {
    background-color: transparent;
    border: #fff 1px solid;
  }
}
.contact-list {
  padding: 8px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  .part-title {
    font-size: 12px;
    color: #333;
  }
  .part-list {
    .part-item {
      display: flex;
      margin: 8px 0;
      cursor: pointer;
      overflow: hidden;
      transition: 0.1s;
      color: #fff;
      padding: 4px;
      .iconfont {
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
      }
      .text {
        font-size: 13px;
        color: #333;
        margin-left: 8px;
        display: flex;
        align-items: center;
      }
      &.active {
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(20px);
        box-shadow: 3px 0px 5px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        .text {
          color: #000;
        }
      }
    }
  }
  .part-empty {
    font-size: 13px;
    color: #333;
    text-align: center;
    height: 40px;
    line-height: 40px;
  }
}
</style>
